<!DOCTYPE html>
<html class="no-js">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>EasyQueue</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/user_page.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="/img/1367329744_17256.ico">

<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<style type="text/css">
.bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -5000;
}

container {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

#div1 {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 80%;
}

#div2 {
	position: absolute;
	top: 20%;
	right: 0;
	left: 0;
	bottom: 60%;
}

#div3 {
	position: absolute;
	top: 40%;
	right: 0;
	left: 0;
	bottom: 40%;
}

#div4 {
	position: absolute;
	top: 63%;
	right: 0;
	left: 0;
	bottom: 17%;
}

#div5 {
	position: absolute;
	top: 80%;
	right: 0;
	left: 0;
	bottom: 0;
}

#div6 {
	position: absolute;
	top: 85%;
	right: 0;
	left: 0;
	bottom: 0;
}
</style>

</head>

<body>

	<!-------------- MOBILE SITE -------------->

	<div id="container">
		<img src="/get_image?queue_id={{queue_id}}" class="bg">

		<div
			style="position: absolute; top: 2%; button: 94%; left: 2%; right: 75%">
			<a
				href="https://play.google.com/store/apps/details?id=com.tauproject.EZQueue&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS50YXVwcm9qZWN0LkVaUXVldWUiXQ">
				<img src="/img/icon-google-play.png" align=right height=100%
				width=100%>
			</a>
		</div>

		<div
			style="position: absolute; top: 37%; button: 63%; left: 52%; right: 50%;">
			<h1 style="font-size: 60px" id=position></h1>
		</div>

		<div
			style="position: absolute; top: 63%; button: 27%; left: 0%; right: 50%">
			<h3 id=text align=right>{{ queue_name }}</h3>
		</div>

		<div
			style="position: absolute; top: 70%; button: 30%; left: 0%; right: 50%">
			<h3 id=time style="direction: rtl;" align=right></h3>
		</div>

		<div
			style="position: absolute; top: 88%; button: 2%; left: 5%; right: 50%">
			<a id=action href=""> <img id=img-mobile src="" align=right
				height=100% width=100%>
			</a>
		</div>
	</div>


	<!-- End Mobile -->

	<!-- Modals -->

	<div id="add_user" style="background-color: #E6E6FA;"
		class="modal hide fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<form id="user_data" action="/auto_join" onsubmit="return validate();">
			<div class="modal-header">
				<button type="button" class="close pull-left" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3 id="myModalLabel" style="text-align: right; direction: rtl;">הצטרפות
					לתור "{{queue_name}}"</h3>
			</div>
			<div class="modal-body">
				<div style="float: right">
					<dt id=add_user_user_type style="text-align: right;">הכנס את
						שמך</dt>
					<input type="text" style="display: none;" name="queue_id" /> <input
						id=add_user_user_type_input type="text"
						style="float: right; text-align: right;" name="user_name"
						placeholder="שם פרטי ומשפחה" /><br>
					<dt style="text-align: right;">הכנס טלפון</dt>
					<input type="text" style="float: right; text-align: right;"
						name="user_phone" placeholder="מספר טלפון" />
					<h6 style="text-align: right; direction: rtl;">*התראת SMS תשלח
						למספר זה כשתורך יגיע</h6>

				</div>
			</div>
			<div class="modal-footer" style="background-color: #E6E6FA;">
				<button type="button" class="btn pull-left" data-dismiss="modal"
					aria-hidden="true">ביטול</button>
				<button type="submit" class="btn btn-primary pull-left">אישור</button>
			</div>
		</form>
	</div>



	<!-------------- JavaScripts -------------->
	<script
		src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="js/vendor/bootstrap.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/vendor/user_page.js"></script>
	<script src="jquery.fittext.js"></script>
	<script>
	        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
	        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	        s.parentNode.insertBefore(g,s)}(document,'script'));;
	</script>
	<script>$(".alert").alert()</script>

	<!-- makes the page update #action/position-mobile/desktop every "update_interval" miliseconds -->

	<script>
  		init("{{queue_id}}","{{user_id}}", "{{token}}");
	</script>
</body>
</html>

